<template>
	<view class="container" @click="blurInput()">
		<view style="margin:0 5rpx;height: 100rpx;">
			<view style="float: left;">
				<image mode="aspectFit" :src="profilePath" style="height: 80rpx; width: 80rpx;"></image>
			</view>
			<view style="float: left; margin-left: 20rpx;margin-top: 20rpx;">
				<text>{{username}}</text>
			</view>
		</view>
		<view>
			{{bookName}}
		</view>
		<view class="header">
			<image :src="imagePath" mode="aspectFill" style="width: 700rpx;height: 400rpx;"></image>
		</view>
		<view style="float: right;">{{categoryName}}</view>
		<view style="border-bottom: 1rpx solid #8f8f8f;padding-bottom: 50rpx;height: fit-content;">
			<view style="margin-bottom: 20rpx;"><text style="font-size: 50rpx;">标题:{{title}}</text></view>
			<view><text style="font-size: 30rpx;">详情:{{desc}}</text></view>
			<view style="margin-top: 25rpx;">
				<view style="float: right;">
					<uni-icons v-if="isLike" type="heart-filled" size="25" color="red" @click="like()"></uni-icons>
					<uni-icons v-if="!isLike" type="heart" size="25" color="#999" @click="like()"></uni-icons>
					<text style="font-size: 40rpx;">{{likeCount}}</text>
					<uni-icons type="chatbubble" size="25" color="#999"></uni-icons>
					<text style="font-size: 40rpx;">{{commentCount}}</text>
				</view>

			</view>
		</view>

		<view v-for="item in comments" style="margin-bottom: 50rpx;">
			<view style="margin-top: 25rpx;">
				<view @click.native.stop="changeFocusComment(item.userId,item.id)">
				<view style="float: left;">
					<image :src="item.profile" style="width: 75rpx;height: 75rpx;border-radius: 35rpx;"></image>
				</view>
				<view style="padding-left: 100rpx;">
					<view style="color: #8f8f8f;"><text>{{item.username}}</text></view>
					<view>
						{{item.content}}
					</view>
				</view>
				</view>
				<view v-for="childItem in item.childComments" style="margin-left: 25rpx;" @click.native.stop="changeFocusComment(childItem.userId,item.id)">
					<view style="float: left;width: 80rpx;" >
						<image :src="childItem.profile" style="width: 50rpx;height: 50rpx;border-radius: 35rpx;float: right;"></image>
					</view>
					<view style="padding-left: 100rpx;">
						<view style="color: #8f8f8f;"><text>{{childItem.username}}</text><uni-icons type="right" size="11" color="#999"></uni-icons>{{childItem.responseUsername}}</view>
						<view>
							{{childItem.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 100rpx;">
			
		</view>

		<view class="commentInputBox" style="background-color: white;">
			<text style="float: left;">发布评论:</text>
			<view style="margin-left: 20rpx;float: left;border-bottom: 1rpx solid black;">
				<input placeholder="文明发言" style="" v-model="inputComment" :focus="isFocusInput" />
			</view>
			<view style="float: right;margin-left: 30rpx;padding-right: 20rpx;" @click="submitComment">发布></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		baseUrl,
		loginBefore
	} from '../../static/js/util.js'
	import {
		ref
	} from 'vue'
	let id = ''
	let parentCommentId = 0
	let responseUserId=0
	let authorization = localStorage.getItem("Authorization")
	let title = ref('')
	let desc = ref('')
	let username = ref('')
	let imagePath = ref('')
	let profilePath = ref('')
	let categoryName = ref('');
	let bookName = ref('')
	let likeCount = ref(0)
	let commentCount = ref(0)
	let isFocusInput=ref(false)
	let isLike=ref(false)
	

	let inputComment = ref('')

	let comments = ref([])
	
	function like(){
		let user = localStorage.getItem("user")
		let userId = JSON.parse(user).id
		let params = {
			postId: id,
			userId
		}
		let url='/post/like'
		if(isLike.value){
			url='/post/cancelLike'
		}
		uni.request({
			url: baseUrl + url,
			data: params,
			header: {
				'Authorization': authorization
			},
			method: 'POST',
			success: (res) => {
				requestDetail()
			}
		})
	}

	
	function blurInput(){
		isFocusInput.value=false
		responseUserId=0;
		parentCommentId=0;
	}
	
	function changeFocusComment(userId,commentId){
		responseUserId=userId;
		parentCommentId=commentId;
		isFocusInput.value=true
	}

	function fillComment() {
		let params = {
			postId: id
		}
		uni.request({
			url: baseUrl + '/comment/list',
			data: params,
			header: {
				'Authorization': authorization
			},
			method: 'POST',
			success: (res) => {
				console.log(res.data)
				comments.value = res.data.data
			}
		})
	}

	function submitComment() {
		let user = localStorage.getItem("user")
		let userId = JSON.parse(user).id

		let params = {
			postId: id,
			parentId: parentCommentId,
			content: inputComment.value,
			userId: userId,
			responseUserId
		}
		console.log(inputComment.value)
		uni.request({
			url: baseUrl + '/comment/save',
			data: params,
			method: 'POST',
			header: {
				'Authorization': authorization
			},
			success: (res) => {
				requestDetail()
				fillComment()
			}
		})
	}

	function fillData(data) {
		title.value = data.title
		desc.value = data.desc
		username.value = data.username
		imagePath.value = data.imagePath;
		profilePath.value = data.profilePath;
		categoryName.value = data.categoryName
		bookName.value = data.bookName;
		likeCount.value = data.likeCount;
		commentCount.value = data.commentCount;
		isLike.value=data.isLike
	}
	
	function requestDetail(){
		let user = localStorage.getItem("user")
		let userId = JSON.parse(user).id
		uni.request({
			url: baseUrl + '/post/detail',
			header: {
				'Authorization': authorization
			},
			data: {
				id,userId
			},
			success: (res) => {
				fillData(res.data)
			}
		})
	}

	onLoad(option => {

		loginBefore()
		if (option.id != null) {
			id = option.id
			requestDetail()
		}
	})
	onShow(() => {
		loginBefore()
		fillComment()
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
	}

	.header {
		background-color: #8f8f8f;
		padding: 10rpx;
		width: 700rpx;
		margin: 10rpx auto;
		height: 400rpx;
	}

	.commentInputBox {
		border-top: 1rpx solid #8f8f8f;
		padding-top: 20rpx;
		padding-right: 10rpx;
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		width: 100%;
	}
</style>